<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v2.0.0
* @link https://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->

<html lang="en">
  <head>
    <base href="./">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
    <title>CoreUI Free Bootstrap Admin Template</title>
    <!-- Icons-->
    <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
    <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
    <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
    <!-- Main styles for this application-->
    <link href="css/style.css" rel="stylesheet">
    <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
  </head>
  <body class="app flex-row align-items-center">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-6">
          <div class="card mx-4" id="itemsTemplate">
            <div class="card-body p-4">
              <h1>注册</h1>
              <p class="text-muted">课程教学平台账号注册</p>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <i class="icon-user"></i>
                  </span>
                </div>
                <input class="form-control" type="text" placeholder="请输入用户名" v-model="newItems.username" required>
              </div>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <i class="icon-lock"></i>
                  </span>
                </div>
                <input class="form-control" type="password" v-model="newItems.password" placeholder="请输入密码" required>
              </div>
              <div class="input-group mb-4">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <i class="icon-lock"></i>
                  </span>
                </div>
                <input class="form-control" type="password" v-model="newItems.password" placeholder="请确认密码" required>
              </div>
              <div class="form-group row">
                  <label class="col-md-3 col-form-label">角色:</label>
                  <div class="col-md-9 col-form-label">
                    <div class="form-check form-check-inline mr-1">
                      <input class="form-check-input" id="inline-radio1" type="radio" value="管理员" v-model="newItems.role"
                        name="inline-radios">
                      <label class="form-check-label" for="inline-radio1">管理员</label>
                    </div>
                    <div class="form-check form-check-inline mr-1">
                      <input class="form-check-input" id="inline-radio2" type="radio" value="教师" v-model="newItems.role"
                        name="inline-radios">
                      <label class="form-check-label" for="inline-radio2">教师</label>
                    </div>
                    <div class="form-check form-check-inline mr-1">
                      <input class="form-check-input" id="inline-radio3" type="radio" value="学生" v-model="newItems.role"
                        name="inline-radios">
                      <label class="form-check-label" for="inline-radio3">学生</label>
                    </div>
                  </div>
                </div>
              <button class="btn btn-block btn-success" type="button" onclick="add">立即注册</button>
              <button class="btn btn-block btn-twitter" type="button" onclick="window.location.href='/login.html'"><span>已有账号，立即登录</span></button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- CoreUI and necessary plugins-->
    <script src="vendors/jquery/js/jquery.min.js"></script>
    <script src="vendors/popper.js/js/popper.min.js"></script>
    <script src="vendors/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendors/pace-progress/js/pace.min.js"></script>
    <script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
    <script src="vendors/@coreui/coreui/js/coreui.min.js"></script>
    <script src="js/mock-min.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var items = [];
        var app;
        $(function () {
          //使用jQuery提供的getJSON方法，向服务器发送一个请求
          //返回的结果由第二个参数的function处理
          // $.getJSON("http://127.0.0.1:5050/teacher", function (response) {
          $.getJSON("/users", function (response) {
            items = respons;
            for (var i = 0; i < items.length; i++) {
              items[i].select = false;
            }
            //使用vue.js框架，将response.data数据填充到itemsTemplate模板
            app = new Vue({
              el: '#itemsTemplate',
              data: {
                items: items,
                itemstime: '',
                //添加临时数组对象
                newItems: '',
                index: -1,
              },
              // 在 `methods` 对象中定义方法
              methods: {
                //注册
                add() {
                  alert("1");
                  //   var idd;
                  // if (items.length == 0) {
                  //   idd = 1;
                  // } else {
                  //   idd = items[items.length - 1].id + 1;
                  // }
                  // this.newItems = {
                  //   id: idd, //id自动+1
                  //   name: '',
                  //   sex: '',
                  //   role: '管理员',
                  //   classname: '',
                  //   course: '',
                  //   status: '',
                  //   registerDate:itemstime,
                  //   username:'',
                  //   password:'',
                  // };
                  //   var user = {
                  //     id: app.newItems.id,
                  //     name: app.newItems.name,
                  //     sex: app.newItems.sex,
                  //     registerDate: app.newItems.registerDate,
                  //     status: app.newItems.status,
                  //     course: app.newItems.course,
                  //     class: app.newItems.class,
                  //     username:app.newItems.username,
                  //     password:app.newItems.password,
                  //   };
                  //   $.post("/users/create",
                  //     user,
                  //     function (data, status) {
                  //       alert("数据: \n" + data + "\n状态: " + status);
                  //     });
                },
              },
            });
            return;
          });
        });
      </script>
      <!-- 获取系统当前时间 -->
      <script type="text/javascript">
        // 每隔一秒执行一次函数
        window.setInterval("showtime()", 1000);
    
        function showtime() {
          var date = new Date();
          var s1 = "-";
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          var strDate = date.getDate();
          var hh = date.getHours();
          var mi = date.getMinutes();
          var ss = date.getSeconds();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
          }
          if (hh >= 0 && hh <= 9) {
            hh = "0" + hh;
          }
          if (mi >= 0 && mi <= 9) {
            mi = "0" + mi;
          }
          if (ss >= 0 && ss <= 9) {
            hh = "0" + hh;
          }
          itemstime = year + s1 + month + s1 + strDate + " " + hh + ":" + mi +
            ":" + ss +
            " ";
          // return itemstime;
        }
      </script>
  </body>
</html>